<template>
  <div class="ecahrtsM" style="width: 2000px;height:400px;">
    <!-- <el-row>
      <el-col :span="6">
        <echartsceshi style="width: 300px;height:400px;"></echartsceshi> 
      </el-col>
      <el-col :span="6">
        <zhubing style="width: 300px;height:400px;"></zhubing>
      </el-col>
    </el-row> -->
        <twoPie style="width: 300px;height:400px;float:left"></twoPie>
        <twoHistogram style="width: 300px;height:400px;float:right;"></twoHistogram> 
  </div>
</template>

<script>
const echarts = require('echarts')
import twoHistogram from "./twoHistogram";
// import twoHistogram from "@/views/components/FLPage/twoHistogram";
import twoPie from "./twoPie";
// import twoPie from "@/views/components/FLPage/twoPie";
import {
    flUseWaterYearWideTable
} from '@/api/baseManage/flMaintain/index'
export default {
    name:'ecahrtsM',
    data(){
        return{
            echarts: '',
            waterData:[],
            // datas:
            // [
            //     "180.0",
            //     "280.0",
            //     "500.0",
            //     "99.0",
            //     "256.0",
            //     "1000.0",
            //     "1652.0",
            //     "1111.0",
            //     "2529.77",
            //     "1515.0",
            //     "2688.0",
            //     "1545.0"
            // ]
        }
    },
    methods:{
        createEcharts() {
            this.echarts = echarts.init(document.getElementById('main'));
            var option = {
                tooltip: {
                // 触发类型触发类型：axis柱状图，折线图
                    trigger: 'axis',
                    // 指示器类型
                    axisPointer: {
                        // 指示器类型 cross 十字准星指示器  line直线指示器
                        type: 'line',
                        // 直线颜色
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    // 各工具配置项。
                    feature: {
                        // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                        // dataView: {show: true, readOnly: false},
                        // 动态类型切换 'line'（切换为折线图） 'bar'（切换为柱状图）
                        // magicType: {show: true, type: ['line', 'bar']},
                        // 开启配置项还原
                        // restore: {show: true},
                    }
                },
                legend: {
                    data: ['水量', '平均温度']
                },
                xAxis: [
                    {
                        // 坐标轴类型
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            // 阴影指示器
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        //  数值轴，适用于连续数据。
                        type: 'value',
                        name: '水量(十万方)',
                        min: 0,
                        max: 'dataMax',
                        // 强制设置坐标轴分割间隔
                        interval: 300,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 'dataMax',
                        interval: 300,
                        axisLabel: {
                            formatter: ''
                        }
                    }
                ],
                series: [
                    {
                        name: '水量',
                        // 格式  'line'（切换为折线图） 'bar'（切换为柱状图）
                        type: 'bar',
                        showBackground:true,
                        data: this.waterData
                    },
                    {
                        name: '水度',
                        type: 'line',
                        yAxisIndex: 1,
                        data: this.waterData
                    }
                ]

            };

            // 使用刚指定的配置项和数据显示图表。
            this.echarts.setOption(option);
        },
        // 获取柱状图水量
        async getWaterData(){
            const res = await flUseWaterYearWideTable()
            this.waterData = res.data
            // console.log(res.data);
            console.log(this.waterData,'zongshuiliang ');
            // console.log(this.data,'zongshuiliang ');
            const waterDa = res.data
            console.log(waterDa,'ceceesssss');
            
           
            this.echarts.setOption({

            })
            this.echarts.setOption({
                tooltip: {
                    trigger: 'xxx'
                },
                xAxis: {
                    data: [].concat([])
                },
                series:[
                    {
                        name: '水量',
                        // 格式  'line'（切换为折线图） 'bar'（切换为柱状图）
                        type: 'bar',
                        showBackground:true,
                        data: waterDa
                    },
                    {
                        name: '水度',
                        type: 'line',
                        yAxisIndex: 1,
                        data: waterDa
                    }
                ]
            })
            
        }
    },
    mounted(){
        this.createEcharts()
        // this.getWaterData()
    },
    components:{
      twoPie,
      twoHistogram
    }
}
</script>

<style>

</style>